<template>
	<view class="search-main">
		<view class="search-area">
			<image class="search-icon" src="/static/search_icon.png"></image>
			<input type="text" :focus="isFocus" class="search-input" ref="searchRef" @confirm="searchGoods()"
				v-model="searchValue" />
			<image class="search-delete" src="/static/search_delete.png" @click="searchDelete()" v-if="searchValue">
			</image>
			<view class="search-button" @click="searchGoods()">搜索</view>

		</view>
		<view class="search-lists">
			<template v-if="lists.length > 0">
				<view class="search-item" @click="goGoodDetail(item)" v-for="item in lists">
					<view class="search-item-left">
						<image class="goods-logo" :src="item.logo"></image>
					</view>
					<view class="search-item-right">
						<view class="goods-title">{{item.name}}</view>
						<view class="goods-factory">{{item.company}}</view>
					</view>
				</view>
			</template>

			<TnEmpty mode="data" color="tn-gray-disabled" v-if="lists.length === 0" />
		</view>
		<tn-notify ref="notifyRef" />
	</view>

</template>

<script lang="ts" setup>
	import { ref, getCurrentInstance } from 'vue'
	import { useRouter } from "vue-router"
	import { getGoods } from '@/utils/api';
	import type { TnNotifyInstance } from '@/uni_modules/tuniaoui-vue3'
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import { checkPlatform } from '../../utils/utils';
	import { getToken, saveUserinfo } from '../../utils/common';
	const notifyRef = ref<TnNotifyInstance>()

	const router = useRouter()
	const searchValue = ref(router.currentRoute.value.query.keyword)

	const isFocus = ref(false)

	const searchDelete = () => {
		searchValue.value = ''
		isFocus.value = true
	}

	const goGoodDetail = (item : any) => {
		uni.navigateTo({
			url: '/pages/goods/detail?info=' + JSON.stringify(item)
		});
	}
	const lists = ref([])

	const searchGoods = async () => {

		const token =await getToken();
		if (!token) {
			checkPlatform();
			return;
		}

		if (!searchValue.value) {
			notifyRef.value?.show({
				msg: '请输入搜索关键词',
				type: 'warning',
			})
		}
		const { code, msg, data } = await getGoods(searchValue.value);
		if (code === 1) {
			lists.value = data?.list || [];
		} else {
			notifyRef.value?.show({
				msg: msg || '未查询到数据',
				type: 'warning',
			})
		}
	}

	onLoad(() => {
		searchGoods()

		const { proxy } : any = getCurrentInstance()
		const newMethod = proxy.$wxShare;
		var url = window.location.protocol + "//" + window.location.host;
		const pages = getCurrentPages();
		const link = url + "/#/" + pages[pages.length - 1].route
		newMethod("搜索中心", "", link)
	})


	onShow(() => {
		saveUserinfo();
	})
</script>

<style lang="scss" scoped>
	.search-main {
		width: 686rpx;
		margin: 22rpx auto 0;
	}

	.search-area {
		align-items: center;
		background: #ededed;
		border-radius: 49rpx;
		display: flex;
		flex-wrap: wrap;
		height: 72rpx;
		overflow: hidden;
		position: relative;


		.search-icon {
			height: 40rpx;
			margin-left: 24rpx;
			width: 40rpx;
		}

		.search-input {
			color: #9a9a9a;
			font-size: 28rpx;
			margin-left: 8rpx;
			margin-right: 50rpx;
			width: 450rpx;
		}

		.search-delete {
			height: 32rpx;
			position: absolute;
			right: 118rpx;
			top: 20rpx;
			width: 32rpx;
			z-index: 100;
			cursor: pointer;
		}

		.search-button {
			background: #b3b3b3;
			border-radius: 49rpx;
			color: #fff;
			font-family: PingFangSC-Regular, PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			height: 56rpx;
			line-height: 56rpx;
			margin-left: 16rpx;
			text-align: center;
			width: 90rpx;
		}
	}

	.search-lists {
		margin-top: 52rpx;

		.search-item {
			align-items: center;
			justify-content: space-around;
			border: 2rpx solid #f5f5f5;
			border-radius: 12rpx;
			display: flex;
			flex-wrap: wrap;
			height: 272rpx;
			margin-top: 32rpx;

			.search-item-left,
			.goods-logo {
				height: 216rpx;
				width: 216rpx;
			}

			.goods-logo {
				border: 2rpx solid #eee;
				border-radius: 4rpx;
				overflow: hidden;
			}

			.search-item-right {
				height: 216rpx;
				margin-left: 24rpx;
				width: 416rpx;

				.goods-title {
					color: #5a5a5a;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-size: 28rpx;
					font-weight: 700;
					line-height: 40rpx;
				}

				.goods-factory {
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
					margin-top: 12rpx;
					color: #5a5a5a;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}
			}
		}
	}
</style>